<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :modal="false"
               width="70%"
               class="user-dialog add-or-updata"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :index='true'
                      :dataList='dataList'>
        <el-table-column prop="status"
                         label="运行状态"
                         min-width="100"
                         align="center">
          <template slot-scope="scope">
            {{scope.row.status == 0 ? '启用' : '禁用'}}
          </template>
        </el-table-column>
      </table-template>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="closeDialog()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '/tb/bannerPicture', // 添加或修改接口，API地址
        updateURL: '/tb/bannerPicture', // 添加或修改接口，API地址
        getDataInfoURL: '/tb/device/getDevice?id=', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      visible: false,
      dataForm: {
        id: '',
        name: '', // 设备名称
        subsystem: '', // 所属子系统
        template: '', // 设备模板的id
        type: '', // 产品类型
        status: '', // 0启用，1禁用
        energy: '', // 0否，1是（所属能耗设备）
        marks: '', // 描述
        url: '', // 图片
        model: '', // 设备型号
        ip: '',
        web: '', // 联网方式
        brand: '', // 品牌
        aid: '', // 所在区域的id
        supplier: '', // 供应商
        linkMan: '', // 联系人
        link: ''// 联系方式
      }
    }
  },
  components: { tableTemplate, Search },
  computed: {
    ...mapState({
      typeList: state => state.dict.typeList
    }),
    tableData () {
      return [
        { label: '属性标识', width: '80', prop: 'id' },
        { label: '属性名称', width: '80', prop: 'name' },
        { label: '属性模板', width: '80', prop: 'model' },
        { label: '设备模板', width: '80', prop: 'template' },
        { label: '读写类型', width: '80', prop: 'aname' },
        { label: '描述', width: '80', prop: 'subsystem' }
      ]
    }
  },
  methods: {
    init (data) {
      this.dataForm = data
      this.visible = true
    },
    closeDialog () {
    //   this.$refs.dataForm.resetFields()
      this.$emit('callBack')

      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
